TypeScript基本介紹

TypeScript

TypeScript介紹

背景介紹

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

什么是TypeScript?

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

運行環(huán)境

TypeScript編譯器介紹

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

TypeScript編譯器安裝

  1. 安裝:npm install typescript -g

因為TypeScript編譯器為一個工具包,所以采用全局安裝

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

hello.ts為文件名,因為TypeSscript本身不能直接運行,所以必須編譯成js代碼,才能進行運

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);
}
//聲明一個void類型的變量沒有什么大用，因為你只能為它賦予undefined和null：
let unusable: void = undefined;

  • 定義數(shù)組

    • 第一種:元素類型后面加一個[]
    // 定義一個組成元素為數(shù)字的數(shù)組
let arr1:number[]=[1,2,3,4]
//定義一個字符數(shù)組
let arr2:string[]=['jack','robin','pony']
// 定義一個對象數(shù)組
let arr3:object[]=[
    {name:'jack',age:1967},
    {name:'robin',age:1968},
    {name:'pony',birthday:1974}
]
    • 第二種:使用數(shù)組泛型,Array<元素類型> 
    //定義一個組成元素為字符的數(shù)組
let arr1:Array<string>=['jack','robin','pony']
//定一個數(shù)字數(shù)組
let arr2:Array<number>=[1,2,3,4]
//定義一個對象數(shù)組
let arr3:Array<object>=[
   {name:'jack',age:1967},
   {name:'robin',age:1968},
   {name:'pony',birthday:1974}
]

  • 對象的定義

    • 方案1:
    // 在對象名后面使用一個{}來進行對象屬性值類型的約束
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)建對象的時候引用該接口, 進行屬性值類型的約束
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';
    //聲明成員屬性; 并進行數(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('我會跳新疆舞');
    }
    // 靜態(tài)成員方法
    static sayHi():string{
        console.log('hello world!!!');
        return 'hello world!!';
    }
}
//創(chuàng)建實例:和js中一樣
let p1=new Person({name:'zs',age:10,sex:'男'})

類的繼承(extends)


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

構(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自動轉(zhuǎn)換成js

  • 準備工作

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

  • 第一步: 運行tsc --init命令;生成tsconfig.json項目配置文件

    vscode-ts-01.png

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


    vscode-ts-02.png

  • 第三步:ts文件發(fā)生改變,會自動重新編譯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
    },
    // 用戶指定需要進行編譯的目錄
    "include": [
        "src/**/*"
    ],
    // 用于指定排除項, 此處配置的目錄文件, 將不會被編譯
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    // 指定需要編譯的ts文件列表
    files:[
        "a.ts",
        "b.ts"
    ]
}

參考文檔

英文官網(wǎng)

ts中文網(wǎng)

tsconfig.json

在線運行ts

最后編輯于 ：
?著作權(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ù)。

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