一、安裝
全局安裝typescript(默認你已經安裝了node)
<pre class="hljs nginx" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">npm install -g typescript
復制代碼</pre>
安裝完了以后,就可以使用 typescript
進行開發了
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// demo.ts
function demo01() {
let test: string = 'a test typescript';
console.log(test)
}
demo01()
復制代碼</pre>
typescript結尾的.ts文件是不能直接運行的,需要編譯為.js結尾的文件才能運行
編譯方式:
<pre class="prettyprint hljs vim" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 先編譯為js文件
// 編譯
tsc demo.ts
// 執行
node demo.js
// 使用ts-node插件的方式直接執行.ts文件
npm install -g ts-node
ts-node demo.ts // 直接運行ts文件
復制代碼</pre>
二、靜態類型
<pre class="hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// demo2.ts
const count : number = 1;
復制代碼</pre>
這里定義了 count
變量,這里的 : number
就是定義了一個靜態類型。
注意:warning::靜態變量的類型不可以改變,但是值是可以改變的。
自定義靜態類型
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">...
interface Demo {
name: string;
age: number;
}
let demo : Demo = {
name: '23',
age: 23
}
console.log(demo);...
復制代碼</pre>
三、數據類型
基礎數據類型: number
、 string
、 boolean
、 null
、 undefined
、 symbol
對象類型:對象、數組、類、函數
Number
TypeScript 里的所有數字都是浮點數。 這些浮點數的類型是 number
。 除了支持十進制和十六進制字面量,TypeScript 還支持 ECMAScript 2015 中引入的二進制和八進制字面量。
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let num : number = 11111;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
復制代碼</pre>
String
<pre class="prettyprint hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let str : string = '這是string基礎靜態類型';
let str1 : string = "這是基礎數據類型";
復制代碼</pre>
Boolean
<pre class="hljs rust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let bool : boolean = true;
復制代碼</pre>
Null
<pre class="hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let nul : null = null;
復制代碼</pre>
Undefined
<pre class="hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let unde : undefined = undefined;
復制代碼</pre>
Symbol
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let sym : symbol = Symbol('foo');
let sym1 : symbol = Symbol(123);
復制代碼</pre>
對象
<pre class="prettyprint hljs yaml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let obj : {
user: string,
age: number,
sex: boolean
} = {
user: 'xiaoming',
age: 26,
sex: true
}
console.log(obj) // { user: 'xiaoming', age: 26, sex: true }
復制代碼</pre>
數組
TypeScript像JavaScript一樣可以操作數組元素。 有兩種方式可以定義數組。 第一種,可以在元素類型后面接上 []
,表示由此類型元素組成的一個數組
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 直接[]方式
let arr : Object[] = [null, undefined, 0, '123', true];
let arr1 : String[] = ['null', 'undefined', '0', '123', "true"];
console.log(arr) // [ null, undefined, 0, '123', true ]
console.log(arr1) // [ 'null', 'undefined', '0', '123', 'true' ]
// 數組范型, Array<元素類型>
const arr3: Array<string> = ['str', 'strr', 'strrr'];
復制代碼</pre>
函數
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let func : () => string = () => '小明' // es6箭頭函數
console.log(func) // [Function: func]
復制代碼</pre>
類
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person {}
let per : Person = new Date(); // new Date() 也是可以,并沒有報錯
const per1 : Person = new Person();
console.log(per) // 2020-09-16T11:23:19.698Z
console.log(per1) // Person {}
復制代碼</pre>
enum枚舉
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// dmeo.ts
enum Color {Red, Green, Blue}
let c: Color = Color.Green
let r: Color = Color.Red
let b: Color = Color.Blue
// demo.js
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 1] = "Green";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var c = Color.Green;
var r = Color.Red;
var b = Color.Blue;
console.log(c, b, r);
console.log(Color) // { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
console.log(c, b, r) // 1 2 0 r是0,是因為默認是從0開始
// key、value簡直是你中有我,我中有你,這就是枚舉
//-----------------------------------------------
// 修改起始順序
enum Colors {Pink = 1, Yellow, Purple}
let p: Colors = Colors.Pink
let y: Colors = Colors.Yellow
let p1: Colors = Colors.Purple
console.log(p,y,p1) // 1 2 3
console.log(Colors)
/{
'1': 'Pink',
'2': 'Yellow',
'3': 'Purple',
Pink: 1,
Yellow: 2,
Purple: 3
}/
// 對應的js
var Colors;
(function (Colors) {
Colors[Colors["Pink"] = 1] = "Pink";
Colors[Colors["Yellow"] = 2] = "Yellow";
Colors[Colors["Purple"] = 3] = "Purple";
})(Colors || (Colors = {}));
var p = Colors.Pink;
var y = Colors.Yellow;
var p1 = Colors.Purple;
console.log(p, y, p1); // 1 2 3
console.log(Colors);
//-----------------------------------------------
// 修改沒個值
enum Job {Fe = 12, Php = 1, Java = 4}
let f: Job = Job.Fe;
let p3: Job = Job.Php;
let j: Job = Job.Java;
let fe: string = Job[12];
let php: string = Job[1];
let java: string = Job[4];
console.log(f,p3,j,fe,php,java) // 12 1 4 Fe Php Java
console.log(Job) // { '1': 'Php', '4': 'Java', '12': 'Fe', Fe: 12, Php: 1, Java: 4 }
/*
*/
// 對應的js
var Job;
(function (Job) {
Job[Job["Fe"] = 12] = "Fe";
Job[Job["Php"] = 1] = "Php";
Job[Job["Java"] = 4] = "Java";
})(Job || (Job = {}));
var f = Job.Fe;
var p3 = Job.Php;
var j = Job.Java;
var fe = Job[12];
var php = Job[1];
var java = Job[4];
console.log(f, p3, j, fe, php, java); // 12 1 4 Fe Php Java
復制代碼</pre>
以上就是枚舉的舉例,同理,我是不是可以理解下面對于js來說就是枚舉 ??
<pre class="hljs less" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">{
4: 'java',
34: 'php',
2: 'js'
}
復制代碼</pre>
Any
有時候,我們會想要為那些在編程階段還不清楚類型的變量指定一個類型。 這些值可能來自于動態的內容,比如來自用戶輸入或第三方代碼庫。 這種情況下,我們不希望類型檢查器對這些值進行檢查而是直接讓它們通過編譯階段的檢查。 那么我們可以使用 any
類型來標記這些變量
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
// 下面是官網的例子,但是報錯(這就很迷茫了:joy:)
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed();
let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.
// 當你只知道一部分數據的類型時,any類型也是有用的。 比如,你有一個數組,它包含了不同的類型的數據
let list: any[] = [1, true, "free"];
list[1] = 100;
復制代碼</pre>
Nerver
never
類型表示的是那些永不存在的值的類型。 例如, never
類型是那些總是會拋出異常或根本就不會有返回值的函數表達式或箭頭函數表達式的返回值類型; 變量也可能是 never
類型,當它們被永不為真的類型保護所約束時。
never
類型是任何類型的子類型,也可以賦值給任何類型;然而,
沒有
類型是 never
的子類型或可以賦值給 never
類型(除了 never
本身之外)。 即使 any
也不可以賦值給 never
。
下面是一些返回 never
類型的函數:
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 返回never的函數必須存在無法達到的終點
function error(message: string): never {
throw new Error(message);
}
// 推斷的返回值類型為never
function fail() {
return error("Something failed");
}
// 返回never的函數必須存在無法達到的終點
function infiniteLoop(): never {
while (true) {
}
}
復制代碼</pre>
Object
object
表示非原始類型,也就是除 number
, string
, boolean
, symbol
, null
或 undefined
之外的類型。
使用 object
類型,就可以更好的表示像 Object.create
這樣的API。例如:
<pre class="prettyprint hljs sql" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
復制代碼</pre>
類型斷言
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 第一種尖括號的方式
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 第二種as方式
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
復制代碼</pre>
注意:warning:: 當你在TypeScript里使用JSX時,只有 as
語法斷言是被允許的
四、類型注釋和類型推斷
類型注釋
這種就是 類型注釋
<pre class="hljs swift" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let count : number = 23;
復制代碼</pre>
類型推斷
不寫數據需要的類型,但是系統字段推斷為 number
類型,這就是 類型推斷
。在這里,沒寫類型注釋,但是ts依然識別出count1是 number
類型,就好比反推,這種情況叫做類型推斷。
<pre class="hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let count1 = 24;
復制代碼</pre>
寫不寫類型注釋,根據業務自身去確定,比如計算2個數的和,如果不寫注釋傳入字符串的話就是拼接了,所以要靈活根據業務自身去確定寫不寫類型注釋。
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 這里是計算功能,是需要寫的,否則就是字符串的拼接功能了。
function sumTwo(one : number, two : number) {
return one + two;
}
console.log(sumTwo(2,3)); // 5
// console.log(sumTwo('2','3')); // 報錯
復制代碼</pre>
五、函數參數和返回類型定義
參數
基礎數據類型
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 2個簡單的例子,其他的類似
function echo(str : string) {
console.log(str)
}
function echo1(bool : boolean) {
console.log('打印的值是:' + (bool ? '真' : '假的'));
}
echo('he is a huamen'); // he is a huamen
echo1(true); // 打印的值是:真
echo1(false); // 打印的值是:假的
復制代碼</pre>
對象類型
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 參數是數組
function echo2(str3 : Object []) {
console.log(str3)
}
// 參數是對象
function echo3({one, two} : {one: string, two: string}) {
console.log(one + two)
}
// 參數是函數
function echo4(str : () => "33") {
str()
}
// 參數是類
function echo5(time : Date) {
console.log(time.getTime())
}
echo2([null, undefined, 0, true]); // [ null, undefined, 0, true ]
echo3({one: '3', two: '55'}); // 355
echo4(function () {
return '33';
}); // undefined
echo5(new Date()); // 1600256196949
復制代碼</pre>
返回值
無返回值
函數無返回值,給函數增加類型注釋 void
即可
<pre class="prettyprint hljs livescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function echo6() : void {
console.log('這個函數是沒返回值')
// return 3333; // 直接報錯Type 'number' is not assignable to type 'void'.
}
echo6();
復制代碼</pre>
基礎基礎數據類型
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function echo7(num : number) : boolean {
return num > 0;
}
console.log(echo7(9)); // true
console.log(echo7(-23)); // false
復制代碼</pre>
對象類型
<pre class="prettyprint hljs lua" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 下面是返回個string類型的數組,其他的類似
function echo8() : string[] {
return ['1', '2', 'str', 'num'];
}
console.log(echo8()) // [ '1', '2', 'str', 'num' ]
復制代碼</pre>
六、數組類型
簡單類型
<pre class="prettyprint hljs lua" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let arr : string[] = ['1','3', 'erder', 'sfesrfre'];
console.log(arr) // [ '1', '3', 'erder', 'sfesrfre' ]
復制代碼</pre>
一般api返回的都是數組或者對象,因此如何定義對象類型是個重點!!!
<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 如下看起來可以解決, 但是不夠通用,再來一個同樣的數組,那定義的類型就要在寫一遍,由此ts為我們準備一個概念:類型別名(定義的時候要以type關鍵字開始)!
// 這里的類型:類型別名、接口、類都是可以解決的!
let arr1 : {user: string, age: number}[] = [
{user: 'x', age: 23},
{user: 'y', age: 24},
];
console.log(arr1) // [ { user: 'x', age: 23 }, { user: 'y', age: 24 } ]
復制代碼</pre>
數組包含多種類型
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const xiaojiejie1 : (string | number)[] = ['dajiao',28, 'teacher'] // 不是元組,不能定位到每個元素的類型,調換順序不會報錯。
復制代碼</pre>
類型別名
以關鍵字 type
開始
<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 類型別名
type male = {
name: string,
age: number
}
// 接口
interface female {
user: String;
age: Number;
}
// 類
class Demo {
name: string
age: number
};
let arr2 : male[] = [
{name: 'aaa', sex: true},
{name: 'bbb', sex: true},
{name: 'ccc', sex: !!'true'}
]
console.log(arr2)
let arr3 : female[] = [
{user: 'abbb', age: 23},
{user: 'accc', age: 24},
{user: 'addd', age: 26}
]
console.log(arr3)
let arr4 : Demo[] = [
{name: 'xiaoming', age: 23},
{name: 'xiaoshi', age: 23},
{name: 'xiaohong', age: 23},
{name: 'xiaoguang', age: 23}
]
console.log(arr4)
復制代碼</pre>
七、元組
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const xiaojiejie : [string,string ,number] = ['dajiao','teacher',28]
// 這就是一個元組,定義了每個字段的類型,如果順序變化了,就會報錯。
// 這是一個多維數組的元組
const xiao3 : [string, string, number][] = [
['x', 'te', 3],
['x', 'te', 3],
['x', 'te', 3],
['x', 'te', 3],
]
console.log(xiao3) //
復制代碼</pre>
八、interface接口
定義
<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 定義一個函數
const findXiao = (name: string, age: number, must: number) => {
age < 24 && must > 90 && console.log('錄取')
age > 24 && must < 90 && console.log('淘汰')
}
const xiao = {name: '老謝', age: 21, must: 99}
const xiao1 = {name: '老謝', age: 89, must: 09}
findXiao('辣蟹', 21, 99) // 錄取
復制代碼</pre>
同樣的問題,每次都寫的話,人要累死了:cry:
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 提取為interface
interface Gril {
name: string;
age: number;
must: number;
}
const xiao = {name: '老謝', age: 21, must: 99}
const xiao1 = {name: '老謝', age: 89, must: 09}
const findXiao1 = (gril : Gril) => {
gril.age < 30 && gril.must > 90 && console.log("預錄取")
gril.age > 30 && gril.must < 90 && console.log("預不錄取")
}
findXiao1(xiao) // 預錄取
findXiao1(xiao1) // 預不錄取
復制代碼</pre>
interface和類型別名區別
類型別名是可以直接給類型,比如: type Gril = string;
interface
必須是對象
接口非必選值定義
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">interface Gril1 {
name: string;
age: number;
must: number;
leg ?: string; // 接口非必選值定義
}
const findXiao2 = (gril : Gril1) => {
gril.age < 30 && gril.must > 90 && console.log("預錄取")
gril.age > 30 && gril.must < 90 && console.log("預不錄取")
gril.leg && console.log('我看到你的大長腿了')
}
const xiao2 = {name: '老謝', age: 89, must: 09, leg: "haha"}
findXiao2(xiao2)
// 預不錄取
//我看到你的大長腿了
復制代碼</pre>
接口增加任意參數和方法
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">interface Gril2 {
name: string;
age: number;
must: number;
leg ?: string; // 接口非必選值定義
[propname:string] : any; // 允許加入任意值,不像上面的那么嚴格
say(): string; // 增加了一個say方法,返回值是string類型
}
復制代碼</pre>
類繼承接口(implements)
<pre class="prettyprint hljs dart" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Xiao3 implements Gril2 {
name = 'zhy'
age = 23
must = 99
say() {
return this.name
}
}
console.log(new Xiao3()) // Xiao3 { name: 'zhy', age: 23, must: 99 }
復制代碼</pre>
接口繼承接口(extends)
<pre class="hljs dart" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">interface Xiao4 extends Gril2{
}
復制代碼</pre>
九、類
定義
<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Lady {
content = 'say hi'
say() {
return this.content
}
}
const xiaohong = new Lady();
console.log(xiaohong.say()) // say hi
復制代碼</pre>
繼承和方法重寫
super
關鍵字支持使用父類的方法,但是不能使用屬性
<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Zhang extends Lady {
say() {
return '這里是Zhang的重寫';
}
walk() {
console.log('1111111111super', super.say()) // 方法是可以的
// console.log('1111111111super', super.content) // 報錯,屬性不行
return '邊走鞭炮';
}
}
const xiaozhang = new Zhang();
console.log(xiaozhang.content) // say hi
console.log(xiaozhang.say()) // 這里是Zhang的重寫
console.log(xiaozhang.walk()) // 1111111111super say hi
復制代碼</pre>
super使用父類的方法
訪問限制符public,protected,private
public
: 類的內部和外部都可以訪問
protected
:類的內部和子類可以訪問
private
: 只能在自己本類內部訪問
<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person {
public name : string
public say() {
return this.name
}
}
const zhy = new Person();
zhy.name = 'haiyang';
console.log(zhy.say()) // haiyang
class Person1 {
protected name : string = 'yangyang'
public say() {
return this.name
}
}
const zhy1 = new Person1();
// zhy1.name = 'haiyang'; // 報錯,Property 'name' is protected and only accessible within class 'Person1' and its subclasses.
console.log(zhy1.say()) // yangyang
class Person2 extends Person1 {
public walk() {
return this.name
}
}
const zhy2 = new Person2()
console.log(zhy2.walk()) // yangyang
class Person3 {
private name : string = 'haihai'
public say() {
return this.name
}
}
const zhy3 = new Person3();
// zhy3.name = 'haiyang'; // 報錯,Property 'name' is private and only accessible within class 'Person3
console.log(zhy3.say()) // haihai
class Person4 extends Person3{
walk() {
// return this.name //報錯, 09_calss.ts:78:17 - error TS2341: Property 'name' is private and only accessible within class 'Person3'.
}
}
const zhy4 = new Person4()
console.log(zhy4.walk()) // undefined
復制代碼</pre>
構造函數
<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Now{
}
class Chl extends Now {
constructor() {
super() // 報錯才補的
//因為沒寫super(),所以報錯了, Constructors for derived classes must contain a 'super' call.
console.log(1111)
}
}
const c = new Chl();
復制代碼</pre>
getter,setter,static用法
-
getter
、setter
都是屬性,只是形式函數
2. 屬性的名字可以是隨意的,你自己知道對應的意思就好
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Xie {
constructor(private num_age : number) {
}
// 屬性的名字是隨意的,此時看著是方法,但對于類來說只是一個屬性
set name(age : number) {
this.num_age = age
}
get age() {
return this.num_age
}
}
const xiaoxie = new Xie(32)
console.log(xiaoxie.age) //32 注意是屬性!!!
xiaoxie.name = 4444 // 注意是屬性!!!
console.log(xiaoxie.age) // 4444 上面改變了年齡
/*
1. 靜態屬性和方法只是不應實例化類,而類可以直接調用
*/
class StaticClass {
name = 'zhy'
static age = 23
say() {
console.log('我不是static的方法')
}
static walk() {
console.log('我是static,并且可以在外部使用的方法')
}
}
console.log(StaticClass.name) // StaticClass 這個應是固有的屬性,獲取方法名字
console.log(StaticClass.age) // 23
// console.log(StaticClass.say()) // 不可以訪問,會報錯
console.log(StaticClass.walk()) // 我是static,并且可以在外部使用的方法
復制代碼</pre>
只讀屬性和抽象類
只讀屬性
關鍵字readonly
<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person10 {
public readonly _name :string;
constructor(name:string) {
this._name = name;
}
}
const person10 = new Person10('demo')
// person10._name= '謝廣坤' // 報錯,Cannot assign to '_name' because it is a read-only property.
console.log(person10._name) // demo
復制代碼</pre>
抽象類
1. 關鍵字abstract定義類
2. 抽象方法不能有方法體
3. 子類必須實現抽象方法
4. 抽象類里面可以有其他正常類的屬性和方法(根據php推出)
<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">abstract class Girl{
abstract skill() //因為沒有具體的方法,所以我們這里不寫括號
}
class Waiter extends Girl{
skill(){
console.log('大爺,請喝水!')
}
}
class BaseTeacher extends Girl{
skill(){
console.log('大爺,來個泰式按摩吧!')
}
}
class seniorTeacher extends Girl{
skill(){
console.log('大爺,來個SPA全身按摩吧!')
}
}
abstract class Girl{
name = 'zhy'
say() {
return 333;
}
abstract skill() //因為沒有具體的方法,所以我們這里不寫括號
}
復制代碼</pre>