typescript入門

安裝typescript

npm install -g typescript

在vscode中自動編譯typescript

  • 創(chuàng)建tsconfig.json文件

tsc --init

  • 將下面代碼復(fù)制到tsconfig.json文件中
{
  "compilerOptions": {
   "target": "es5",
   "noImplicitAny": false,
   "module": "amd",
   "removeComments": false,
   "sourceMap": false,
   "outDir": "src/js"http://你要生成js的目錄
  }
}
  • 接下來就是在.ts文件中寫typescript代碼，完成之后點擊菜單 任務(wù)-運行任務(wù)，點擊tsc:構(gòu)建-tsconfig.json

typescript基本數(shù)據(jù)類型

  • Boolean
var isBool:boolean = false;

function tell(){
    alert(isBool);
}

tell();
  • Number
var num:number = 10;
console.log(num);
  • String
var str:string = "帥哥";
function tell(){
    str+="hello ";
    alert(str);
}

tell();
  • Array
// 第一種方式
var list1:number[] = [1,2,3];

function tell(){
    alert(list1[0]);
    alert(list1[1]);
    alert(list1[2]);
}
tell();
// 第二中方式
var list2:Array<string> = ['帥哥','美女'];

function tell2(){
    alert(list2[0]);
    alert(list2[1]);
}
tell2();
  • Enum 枚舉
enum Color{Red,Green,Blue};

var colorName:string = Color[1];
alert(colorName); // Green

// 修改下標(biāo)
enum Color{Red=1,Green,Blue};

var colorName:string = Color[1];
alert(colorName); // Red
  • Any 不知道什么類型
    有時候，我們會想要為那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自于動態(tài)的內(nèi)容，比如來自用戶輸入或第三方代碼庫。 這種情況下，我們不希望類型檢查器對這些值進(jìn)行檢查而是直接讓它們通過編譯階段的檢查。 那么我們可以使用 any類型來標(biāo)記這些變量：
var notsure:any =10;
var list:any[] = [1,"hello",false];
  • void
    當(dāng)一個函數(shù)沒有返回值時，你通常會見到其返回值類型是 void:
function warnUser(): void {
    alert("This is my warning message");
}

聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：

let unusable: void = undefined;

函數(shù)

  • 函數(shù)類型
let myAdd = function(x: number, y: number): number { return x + y; };
// 完整函數(shù)類型
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };
  • 可選參數(shù)和默認(rèn)參數(shù)
function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");

JavaScript里，每個參數(shù)都是可選的，可傳可不傳。 沒傳參的時候，它的值就是undefined。 在TypeScript里我們可以在參數(shù)名旁使用 ?實現(xiàn)可選參數(shù)的功能。 比如，我們想讓last name是可選的：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right
  • 默認(rèn)參數(shù)
function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // works correctly now, returns "Bob Smith"
let result2 = buildName("Bob", undefined);       // still works, also returns "Bob Smith"
let result3 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result4 = buildName("Bob", "Adams");         // ah, just right
  • 剩余參數(shù)
    當(dāng)參數(shù)不確定時，剩余的參數(shù)在(...)中
function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
  • 函數(shù)重載
function attr(name:string):string;
function attr(age:number):number;

function attr(nameorage:any):any{
    if(nameorage&&typeof nameorage === "string"){
        alert("姓名");
    }else{
        alert("年齡");
    }
}

attr("hello");
attr(18);

typescript類

  • 類的創(chuàng)建
class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    print(){
        return this.name+":"+this.age;
    }
}

var p = new Person("aa",18);
alert(p.print());
  • 類的繼承
class Person{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    tell(){
        return this.name+":"+this.age;
    }
}

class Student extends Person{
    school:string;
    constructor(school:string){
        super("li",80);
        this.school = school;
    }
    tell(){
        return this.name+":"+this.age+":"+this.school;
    }
}

var s = new Student("school");

alert(s.tell());
  • 修飾符
    public
    private

接口

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
  • 函數(shù)類型
interface SearchFunc{
    (source:string,subString:string):boolean;
}

var mySearch:SearchFunc;
mySearch = function(source:string,subString:string){
    var result = source.search(subString);
    if(result!=-1){
        return true;
    }else{
        return false;
    }
}
  • 數(shù)組類型
interface StringArray{
    [index:number]:string;
}

var myArray:StringArray;

myArray=["li","wang"];
alert(myArray[1]);
  • 實現(xiàn)接口
interface ClockInterface{
    currentTime:Date;
    setTime(d:Date);
}

class Clock implements ClockInterface{
    currentTime:Date;
    setTime(d:Date){
        this.currentTime = d;
    }
    constructor(h:number,m:number){

    }
}
  • 接口繼承
    可以多繼承
interface Shape{
    color:string;
}

interface PenStroke{
    penWidth:number;
}

interface Square extends Shape,PenStroke{
    sideLength:number;
}

var s = <Square>{};
s.color = "blue";
s.penWidth = 10;
s.sideLength = 10;

混合類型

interface Counter{
    interval:number;
    reset():void;
    (start:number):string;
}

var c:Counter;
c(10);
c.reset();

泛型

function Hello<T>(arg:T):T{
    return arg;
}
var output = Hello<string>("hello");
alert(output);
  • 泛型的應(yīng)用
function Hello<T>(arg:T):T{
    alert(arg.length);
    return arg;
}

上面的代碼因為沒有指定泛型，所以沒有l(wèi)ength屬性會報錯

function Hello<T>(arg:T[]):T[]{
    alert(arg.length);
    return arg;
}

上面代碼指定泛型-數(shù)組，所以有l(wèi)ength

function Hello<T>(arg:T[]):T[]{
    return arg;
}

var list:Array<string> = Hello<string>(["1","2","3"]);
for(var i=0;i<list.length;i++){
    alert(list[i]);
}
  • 泛型類型
function Hello<T>(arg:T):T{
    return arg;
}

var myHello:<k>(arg:k)=>k = Hello;

alert(myHello("hello"));

function Hello<T>(arg:T):T{
    return arg;
}

var myHello:{<T>(arg:T):T} = Hello;
alert(myHello("Hello"));
  • 泛型類
class HelloNumber<T>{
    Ten:T;
    add:(x:T,y:T)=>T;
}

var myHelloNumber = new HelloNumber<number>();
myHelloNumber.Ten = 10;
myHelloNumber.add = function(x,y){
    return x+y;
}
alert(myHelloNumber.Ten);
alert(myHelloNumber.add(10,10));
  • 模塊
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概述 TypeScript本質(zhì)上是向JavaScript語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?，同時也支持...
    oWSQo閱讀 8,690評論 1贊 45
  • 慕課網(wǎng)@JoJozhai 老師 TypeScript入門課程分享 TypeScript入門 ES5,ES6,JS,...
    shangpudxd閱讀 10,654評論 0贊 22
  • 最近開始嘗試在項目中使用Typescript, 簡單來說，Typescript是一個JavaScript的超集（即...
    TechBuilds閱讀 1,167評論 0贊 0
  • TypeScript簡介： 微軟開發(fā) javascript的超集 遵循ES6腳本語言的規(guī)范 添加了遵循ES6的語...
    咖啡浮點閱讀 935評論 0贊 3
  • 一、什么是TypeScript？ TypeScript 是微軟開發(fā)一款開源的編程語言，本質(zhì)上是向 JavaScri...
    ConRon閱讀 1,669評論 0贊 3

友情鏈接更多精彩內(nèi)容