一，配置環境
1、在node.js基礎下全域安裝TS插件
2、安裝 typescript：
npm install -g typescript || cnpm install -g typescript
3,查看版本 tsc -v
Version 4.3.5 // 出現版本號安裝成功
二、TS的基礎運用
1、在vscode中書寫TS， 檔案后綴名為 .ts 的檔案
function sayhi(name: string):void {
console.log('hi', name);
}
let myName: string = '老狗'
sayhi(myName)
2、不能直接應用ts檔案，需要使用tsc命令編譯成js檔案引入html中使用
----在終端中輸入： tsc x你要編譯的檔案x.ts 以.ts結尾 回車自動編譯生成同目錄下的 js 檔案
----在html檔案中引入即可
3、用node.js 識別ts檔案 原理與2一致，
node xxxx.js(tsc編譯后的js檔案)
4、自動轉化ts檔案為js檔案：
---- ts-node 自動轉化ts檔案并在node.js中執行
-----npm install -g ts-node 全域安裝轉化插件
-----ts-node xxxx.ts(想要編譯的檔案) 終端輸入，在node.js中編譯
5、tsc 命令監視當前ts檔案，自動編譯，生成JS檔案
-----tsc xxx.ts -w 自動編譯TS檔案，顯示時間，延遲執行
三、TS的資料型別(let：變數、const：常量）
6、自動檢測所有TS檔案，并生成JS檔案
a, 在根目錄創建 tsconfig.json 檔案，內容為{}
b, 終端指令 tsc 檢測所有TS檔案并編譯成JS檔案
1、
變數語法：
let 變數名：變數型別;
// 宣告一個age并指定資料型別
let age：number;
let name：string;
一旦宣告資料型別，該變數只能存盤同等型別的值
age = 18 success
age = 'ls' err
//不宣告資料型別直接賦值,TS可自動檢測資料型別
let c = false === let c: boolean = false != let c = 'aaa'
// 函式形參宣告資料型別
function sum（a:number, b:number) {
return a + b}
log(sum(a:123,b:'123')) err
log(sun(a:123,b:123)) success
// 函式回傳值型別
function sum（a:number, b:number)：number {
return a + b}
let res = sum(a:123,b:123) //number型別
ps：a,為了使TS更容易推廣，校驗不嚴格，ts檔案代碼即使變數型別不符也會編譯為js檔案
b,編譯后的js可為任意版本js檔案也可指定版本，兼容性強
2、| 與 &
// 字面量進行型別宣告
let a: 10;
a = 10
// a ='111'
console.log(a);
// 可以使用 | 來連接多個型別
let b:number | string;
b = 111
console.log(b);
b='222'
console.log(b);
// & 表與
let r: {name:string} &{age:any}
r = {
name:'ls',
age:18
}
3、any 任意型別、unknown 未知型別
any 表任意型別，對變數關閉型別檢測
可以給任意變數賦值
不建議TS使用any型別
let d:any // 顯式any
let d // 隱式any
unknown 表未知型別之關閉自己的資料檢測，不能直接給其他變數賦值，可通過判斷 || 斷言賦值
let s: unknown;
s = 111;
s = '222';
let e:string;
e = 'hello';
e = s err
unknown 不能直接給其他變數賦值，需要做出判斷
if(typeof s==='string') {
e = s
success
}
型別斷言
e = s as string
e = <string>s
4、 空值
void 空值，以函式為列，沒有回傳值
function fc():void {
}
never 表永遠無回傳結果, 設定報錯，使用少之又少
function fun(): never {
}
5、object 物件型別
let a: object
a = {}
a = function() {}
指定物件型別，一般指定物件的某個值
要求結構一致
在屬性名后面加？，表可選
let b:{name: string,age:number};
b = {name:'ls'}
b = {
age:99,
name:'ls'
}
[propName:string]:any 表任意型別的屬性
let g:{name: string,[propName:string]:any};
g = {
name:'ls',
age: 18,
sex: '男'
}
6、函式宣告
/**
* 設定函式結構型別宣告
*/
let y: (a:number,b:number)=>number;
y = function fn2(n1,n2):number {
return n1+n2;
}
7、
/**
* array 陣列宣告
* 型別[ ]
* array<型別>
*/
let e: string[]; // 字串型別的陣列
let g: Array<number> // 數值型別的陣列
8、元組，enum 列舉
/**
* 元組，元組就是固定長度的陣列
*/
let h:[string,number];
h = ['aa',111]
/**
* enum 列舉
* 先定義后使用
*/
enum gender{
mm = 0,
gg = 1
}
let i : {name: string,gender:gender}
i = {
name: 'ls',
gender: gender.gg
}
console.log(i.gender)
9、
/**
* 型別的別名
* 當型別連接多個時可使用別名，簡化結構
* 使用時做型別名使用
*/
type myType1 = string
type myType2 = 1 | 2 |3
let d: myType1
let v: myType2
// v = 7 err
// v = 1 |2 |3
d = '1'
// d = 1
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289738.html
標籤：其他
上一篇：【熬夜猛肝萬字博文】學妹問我怎么入門 Javascript，百般盤問下我終于決定貢獻出自己的 JavaScript入門筆記(四)
下一篇：jQuery 事件、其他方法