TypeScript

TypeScript介紹

背景介紹

• TypeScript簡(jiǎn)稱ts
• TypeScript是ES6的實(shí)現(xiàn),ts語(yǔ)言是按照ES6的標(biāo)準(zhǔn)設(shè)計(jì)的
• TypeScript是微軟公司聯(lián)合谷歌公司推出的一門基于javascript的一門新語(yǔ)言,目前主要應(yīng)用于Angular2以上版本的的開發(fā)中

什么是TypeScript?

• TypeScript是JavaScript的一個(gè)超集,對(duì)JavaScript中的變量加入的類型的支持和限制
• TypeScript可以編譯出純凈,簡(jiǎn)潔的Javascript代碼,并且可以運(yùn)行在任何瀏覽器上、Node.js環(huán)境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中
• TypeScript本身并不能直接運(yùn)行在瀏覽器上,需要編譯成JavaScript進(jìn)行運(yùn)行(可以認(rèn)為TypeScritp只存在于開發(fā)階段,生產(chǎn)階段依然使用的是我們熟悉的JavaScript,使用TypeScript中的好處可以提高開發(fā)效率,解決javascript弱類型帶來(lái)的一些問題)
• TypeScript的文件后綴名為.ts

運(yùn)行環(huán)境

TypeScript編譯器介紹

• TypeScript編譯器基于nodejs環(huán)境,所以必須先安裝nodejs環(huán)境

TypeScript編譯器安裝

1. 安裝:npm install typescript -g

因?yàn)門ypeScript編譯器為一個(gè)工具包,所以采用全局安裝

2. 編譯:tsc hello.ts
   • 指定編譯文件名: tsc hello.ts --outFile bundle.js

hello.ts為文件名,因?yàn)門ypeSscript本身不能直接運(yùn)行,所以必須編譯成js代碼,才能進(jìn)行運(yùn)

TypeScript中數(shù)據(jù)類型介紹

• 定義布爾類型
  //ts聲明布爾類型的變量
  let flag:boolean=true;

• ts中定義數(shù)值類型
  let count:number=100

• ts中定義字符類型
  let str:string='hello world'

• ts中定義undefined類型
  let a:undefined=undefined

• ts中定義null
  let b:null=null

• ts中定義any(任意類型:變量值可以為任意類型)
  let anyData:any=''

• ts定義void類型:一般用預(yù)定義函數(shù)返回值類型

function print:void(params){
    console.log(params);
}
//聲明一個(gè)void類型的變量沒有什么大用，因?yàn)槟阒荒転樗x予undefined和null：
let unusable: void = undefined;

• 定義數(shù)組

  • 第一種:元素類型后面加一個(gè)[]

  // 定義一個(gè)組成元素為數(shù)字的數(shù)組
  let arr1:number[]=[1,2,3,4]
  //定義一個(gè)字符數(shù)組
  let arr2:string[]=['jack','robin','pony']
  // 定義一個(gè)對(duì)象數(shù)組
  let arr3:object[]=[
      {name:'jack',age:1967},
      {name:'robin',age:1968},
      {name:'pony',birthday:1974}
  ]
  

  • 第二種:使用數(shù)組泛型,Array<元素類型>

  //定義一個(gè)組成元素為字符的數(shù)組
  let arr1:Array<string>=['jack','robin','pony']
  //定一個(gè)數(shù)字?jǐn)?shù)組
  let arr2:Array<number>=[1,2,3,4]
  //定義一個(gè)對(duì)象數(shù)組
  let arr3:Array<object>=[
     {name:'jack',age:1967},
     {name:'robin',age:1968},
     {name:'pony',birthday:1974}
  ]
  

• 對(duì)象的定義

  • 方案1:

  // 在對(duì)象名后面使用一個(gè){}來(lái)進(jìn)行對(duì)象屬性值類型的約束
  let obj:{name:string,age:number,isMarry:boolean}={
      name:'zs',
      age:30,
      isMarry:false
  }
  

  • 方案2:

  // 使用接口定義屬性值的類型
  interface Person={
      name:string;
      age:number;
      isMarry:boolean;
  }
  // 創(chuàng)建對(duì)象的時(shí)候引用該接口, 進(jìn)行屬性值類型的約束
  let p1:Person={
      name:'zs',
      age:30,
      isMarry:false
  }
  

函數(shù)

函數(shù)的定義

• 加入了類型的約束,只要體現(xiàn)在參數(shù)和返回值上面

function sum(a:number,b:number):string{
    return '求和結(jié)果為:'+(a+b);
}

類(class)

類(class)的介紹

// 類(class)相當(dāng)于ES5中的構(gòu)造函數(shù)

class Person{
    // 聲明靜態(tài)屬性
    static version:string='V1.0.0';
    //聲明成員屬性; 并進(jìn)行數(shù)據(jù)類型的約束
    name:string;
    age:number;
    sex:string;
    //構(gòu)造函數(shù),做一些初始化的事,比如給成員屬性賦值
    constructor(props){
        //成員屬性賦值
        this.name=props.name;
        this.age=props.age;
        this.sex=props.sex;
    }
    //聲明成員方法1
    sayName(){
        console.log('My name is '+this.name);
    }
    //聲明成員方法2
    dance(){
        console.log('我會(huì)跳新疆舞');
    }
    // 靜態(tài)成員方法
    static sayHi():string{
        console.log('hello world!!!');
        return 'hello world!!';
    }
}
//創(chuàng)建實(shí)例:和js中一樣
let p1=new Person({name:'zs',age:10,sex:'男'})

類的繼承(extends)

//通過extends語(yǔ)法結(jié)構(gòu)繼承Person類的屬性和方法
class Student extends Person{
    //聲明自己獨(dú)有的成員屬性; 并進(jìn)行數(shù)據(jù)類型的約束
    addr:string;
    constructor(props){
        //必須在此處使用super()先調(diào)用父類的構(gòu)造函數(shù)
        super(props);
        //屬性賦值
        this.addr=props.addr
    }
    //添加自己獨(dú)有的成員方法
    hobby(){
        console.log('愛生活,愛代碼');
    }
    
}
//創(chuàng)建實(shí)例對(duì)象
let s1=new Student({name:'ls',age:10,sex:'女',addr:'中國(guó)西安'});

構(gòu)建工具集成

webpack

• 參考文檔

• 安裝ts-loader:npm install ts-loader --save-dev

• 配置webpack

  • webpack.config.js基本配置

  module.exports = {
      entry: "./src/index.tsx",
      output: {
          filename: "bundle.js"
      },
      resolve: {
          // Add '.ts' and '.tsx' as a resolvable extension.
          extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
      },
      module: {
          loaders: [
              // all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
              { test: /\.tsx?$/, loader: "ts-loader" }
          ]
      }
  };
  

vscode配置ts自動(dòng)轉(zhuǎn)換成js

• 準(zhǔn)備工作

  • 全局安裝typescript工具包:npm i typescript -g

• 第一步: 運(yùn)行tsc --init命令;生成tsconfig.json項(xiàng)目配置文件
  

  vscode-ts-01.png

• 第二步: 終端=>運(yùn)行任務(wù)=>tsc監(jiān)視

  
  
  vscode-ts-02.png

• 第三步:ts文件發(fā)生改變,會(huì)自動(dòng)重新編譯js, 并保存到tsconfig.json中指定的目錄
  

  vscode-ts-03.png

• tsconfig.json配置文件示例

  {
      "compilerOptions": {
          "target":"es5",       //指定最終編譯的js版本
          "module": "system",   
          "noImplicitAny": true,
          "removeComments": true,
          "preserveConstEnums": true,
          "outFile": "../../built/local/tsc.js",
          "outDir": "./js",     //指定編譯輸出目錄
          "sourceMap": true
      },
      // 用戶指定需要進(jìn)行編譯的目錄
      "include": [
          "src/**/*"
      ],
      // 用于指定排除項(xiàng), 此處配置的目錄文件, 將不會(huì)被編譯
      "exclude": [
          "node_modules",
          "**/*.spec.ts"
      ],
      // 指定需要編譯的ts文件列表
      files:[
          "a.ts",
          "b.ts"
      ]
  }
  

參考文檔

英文官網(wǎng)

• ts官網(wǎng)

ts中文網(wǎng)

• ts中文網(wǎng)

tsconfig.json

• tsconfig.json

在線運(yùn)行ts

• 在線運(yùn)行ts