| 類型 | 例子 | 描述 |
|---|---|---|
| number | 1,2,-2 | 任意數(shù)字 |
| string | 'hi',"hi" | 任意字符串 |
| boolean | true,false | 布爾值或者true false |
| 字面量 | 其本身 | 限制變量的值就是該字面量的值 |
| any | * | 任意類型 |
| unknown | * | 類型安全的any |
| void | 空值(undefined) | 沒有值或者undefined |
| never | 沒有值 | 不能是任意值 |
| array | [1,1,2] | 任意js數(shù)組 |
| object | {name:"孫悟空"} | 任意js對(duì)象 |
| tuple | [4,5] | 元素，TS新類型，固定長(zhǎng)度的數(shù)組 |
| enum | enum{A,B} | 枚舉，TS新類型 |
區(qū)別：
藍(lán)田網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,藍(lán)田網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為藍(lán)田上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的藍(lán)田做網(wǎng)站的公司定做！
接口，只能為對(duì)象指定類型
類型別名，不僅可以給對(duì)象指定類型，實(shí)際上可以為任意類型指定別名
重慶分公司
重慶分公司
//接口
interface IPerson = {
name: string
age: number
sayHi(): void
}
// 類型別名
type IPerson = {
name: string
age: number
sayHi(): void
}
let person: IPerson = {
name: '劉老師',
age: 18,
sayHi() {}
}
//類型別名
type NumStr = number | string
let numStr: NumStr = 33
let numStr2: NumStr = '66'
思考以下代碼，兩個(gè)變量的類型分別是什么？
let str1 ='Hello Ts'
const str2 : 'Hello Ts'
通過(guò) TS 類型推論機(jī)制，可以得到答案：
\1. 變量 str1 的類型為：string。
\2. 變量 str2 的類型為：'Hello TS'。
解釋：
\1. str1 是一個(gè)變量（let），它的值可以是任意字符串，所以類型為：string。
\2. str2 是一個(gè)常量（const），它的值不能變化只能是 'Hello TS'，所以，它的類型為：'Hello TS'。
注意：此處的 'Hello TS'，就是一個(gè)字面量類型。也就是說(shuō)某個(gè)特定的字符串也可以作為 TS 中的類型。
除字符串外，任意的 JS 字面量（比如，對(duì)象、數(shù)字等）都可以作為類型使用。
let str1 = 'Hello TS'
const str2: 'Hello TS' = 'Hello TS'
let age: 18 = 18
使用模式：字面量類型配合聯(lián)合類型一起使用。
使用場(chǎng)景：用來(lái)表示一組明確的可選值列表。
比如，在貪吃蛇游戲中，游戲的方向的可選值只能是上、下、左、右中的任意一個(gè)。
解釋：參數(shù) direction 的值只能是 up/down/left/right 中的任意一個(gè)。
優(yōu)勢(shì)：相比于 string 類型，使用字面量類型更加精確、嚴(yán)謹(jǐn)
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {}
changeDirection('left')
//枚舉
/**
*enum
*/
enum Gender {
Male = 0,//可以寫=0 也可以不寫
Female = 1,
}
let i1: { name: string; gender: Gender };
i1 = {
name: "孫悟空",
gender: Gender.Male,
};
console.log(i1.gender === Gender.Female);
// 枚舉：
enum Direction {
Up,
Down,
Left,
Right
}
function changeDirection(direction: Direction) {}
changeDirection(Direction.Left)
枚舉的功能類似于字面量類型+聯(lián)合類型組合的功能，也可以表示一組明確的可選值。
枚舉：定義一組命名常量。它描述一個(gè)值，該值可以是這些命名常量中的一個(gè)。
解釋：
\1. 使用 enum 關(guān)鍵字定義枚舉。
\2. 約定枚舉名稱、枚舉中的值以大寫字母開頭。
\3. 枚舉中的多個(gè)值之間通過(guò) ,（逗號(hào)）分隔。
\4. 定義好枚舉后，直接使用枚舉名稱作為類型注解。
可以直接使用 . 來(lái)訪問(wèn)枚舉中的成員
枚舉是 TS 為數(shù)不多的非 JavaScript 類型級(jí)擴(kuò)展（不僅僅是類型）的特性之一。
因?yàn)椋浩渌愋蛢H僅被當(dāng)做類型，而枚舉不僅用作類型，還提供值 （枚舉成員都是有值的）。
也就是說(shuō)，其他的類型會(huì)在編譯為 JS 代碼時(shí)自動(dòng)移除。但是，枚舉類型會(huì)被編譯為 JS 代碼！
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
? ?
var Direction;
(function (Direction) {
Direction["Up"] = "UP";
Direction["Down"] = "DOWN";
Direction["Left"] = "LEFT";
Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));
說(shuō)明：枚舉與前面講到的字面量類型+聯(lián)合類型組合的功能類似，都用來(lái)表示一組明確的可選值列表。
一般情況下，推薦使用字面量類型+聯(lián)合類型組合的方式，因?yàn)橄啾让杜e，這種方式更加直觀、簡(jiǎn)潔、高效。
原則上不推薦使用any類型這會(huì)讓 TypeScript 變?yōu)?“AnyScript”（失去 TS 類型保護(hù)的優(yōu)勢(shì)）。
因?yàn)楫?dāng)值的類型為 any 時(shí)，可以對(duì)該值進(jìn)行任意操作，并且不會(huì)有代碼提示
let obj: any = { x: 0 }
// 訪問(wèn)不存在的屬性 或者 賦值
// obj.aaa
// obj.aaa = 10
// 當(dāng)作函數(shù)調(diào)用
// obj()
// 賦值給其他類型的變量
// let n: number = obj
// --
// let a
// a = 1
// a = ''
// a()
// function add(num1, num2) {}
// add(1, 2)
// add(1, '2')
// add(1, false)
解釋：以上操作都不會(huì)有任何類型錯(cuò)誤提示，即使可能存在錯(cuò)誤！
盡可能的避免使用 any 類型，除非臨時(shí)使用 any 來(lái)“避免”書寫很長(zhǎng)、很復(fù)雜的類型！
其他隱式具有 any 類型的情況：1 聲明變量不提供類型也不提供默認(rèn)值 2 函數(shù)參數(shù)不加類型。
注意：因?yàn)椴煌扑]使用 any，所以，這兩種情況下都應(yīng)該提供類型！
unknown只霍霍自己 賦值給別人是不行的 而any只要跟他沾邊都會(huì)被霍霍都變成any
unknown就是個(gè)類型安全的any 賦值給別人前必須做判斷
let e: unknown = 'str';
let s: string;
//unknown 賦值給別人需要先判斷類型
if (typeof e === "string") {
s = e;
}
//或者類型斷言
s = e as string;
s = e;
let a = "male" | "female"
a = "male";
a = "female";
主要用于函數(shù)返回值的確定
function fn(num): void {
if (num>0) {
return; //不應(yīng)有返回值
} else {
return undefined;
}
}
function fn2(): never{
throw new Error("出錯(cuò)了");//就是執(zhí)行不完 一定會(huì)出錯(cuò)
}
一般是不用object 限制太寬泛了
let a1: object;
a1 = {}
a1 = function () {
};
//用于指定哪些屬性
let b1: { name: string, age?: number }//加上問(wèn)好表示屬性可選
b1 = { name: '孫悟空' }
let c1: { name: string, [propName: string]: any }// [propName: string]: any表示可以有任意類型的屬性
c1 = { name: "豬八戒", age: 18, gender: "male" }
//定義函數(shù)的參數(shù)結(jié)構(gòu) 的類型聲明
let d1: (a: number, b: number) => number;
d1 = function (a: number, b: number) { return a + b; };
//數(shù)組
let e1: string[];//表示字符串?dāng)?shù)組
e = ['a', 'b', 'c', 'd'];
let f1: number[];
let g1: Array;
長(zhǎng)度固定的數(shù)組
//元組
/**
* 語(yǔ)法: [類型，類型，類型]
*/
let h1: [string, string, number];
h1 = ["hello", "world", 123];
// | 表示或 & 表示且
let j1: { name: string } & { age: number }
j1={name: "孫悟空",age:18}
tsc app.ts -w
-w watch模式 只監(jiān)視app.ts
使用tsc 編譯此項(xiàng)目下的全部ts文件 前提是得由tsconfig.json文件 即使這個(gè)文件為空json也會(huì)按照默認(rèn)的選項(xiàng)來(lái)編譯!
package.json 需要哪些包
{
"name": "ts-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open "
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.13",
"@babel/preset-env": "^7.18.10",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.24.1",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.10.0"
}
}
webpack.config.js 定義打包的方式
//引入路徑包
const path = require("path");
//引入一個(gè)插件包
const HTMLWebpackPlugin = require("html-webpack-plugin");
//引入clean插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
//添加模式
mode: "development",
//指定入口文件
entry: "./src/index.ts",
//指定打包文件所在目錄
output: {
//指定目錄
path: path.resolve(__dirname, "dist"),
//指定名字
filename: "index.js",
//配置環(huán)境兼容問(wèn)題
environment: {
arrowFunction:false
}
},
//指定打包時(shí)要用到的模塊
module: {
rules: [
{
//test指定的是規(guī)則生效的文件
test: /\.ts$/, //匹配以ts結(jié)尾的文件
//use 要使用的loader 數(shù)組中的內(nèi)容從后往前執(zhí)行
use: [
{
//設(shè)置加載器
loader: "babel-loader",
//設(shè)置babel
options: {
//設(shè)置預(yù)定義的環(huán)境
presets: [
[
//指定環(huán)境的插件
"@babel/preset-env",
//配置信息
{
//要兼容的默認(rèn)瀏覽器
targets: {
//瀏覽器版本
"chrome": "58",
"ie":"11"
},
//指定corejs的版本
"corejs": "3",
//使用corejs的方式
"useBuiltIns": "usage"
}
]
]
},
},
"ts-loader",
],
//exclude 排除哪些文件
exclude: /node-modules/,
},
],
},
//配置webpack的插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "這是一個(gè)自定義的title",
template: "./src/index.html",
}),
],
//用來(lái)設(shè)置引用模塊
resolve: {
extensions: [".ts", ".js"],
},
};
tsconfig.json ts的編譯方式
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true
}
}
//使用class關(guān)鍵字來(lái)定義一個(gè)類
/**
* 屬性
* 方法
*/
class Person{
//實(shí)例屬性
name: string = "孫悟空";
//在屬性前加關(guān)鍵字static可以定義類屬性（靜態(tài)屬性）即不需要?jiǎng)?chuàng)建實(shí)例就可訪問(wèn)的屬性
static age: number = 18;
//只讀屬性
readonly gender: string = "male";
//實(shí)例方法
say() {
console.log('hello')
}
//靜態(tài)方法
static run() {
console.log('run')
}
}
const per = new Person();
console.log('per.name', per.name);
console.log('per', per);
per.say();
console.log('Person.age', Person.age)
Person.run();
class Dog{
name: string;
age: number;
//構(gòu)造函數(shù)
constructor(name: string, age: number) {
console.log('構(gòu)造函數(shù)執(zhí)行了',this)
this.name= name
this.age= age
}
bark() {
console.log('wangwangwang')
}
}
const dog = new Dog('xiaohei',4);
console.log('dog',dog)
(() => {
class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`${this.name}sayHello`);
}
}
class Dog extends Animal {
sayHello(): void {
console.log("wangwangwang"); //子類覆蓋掉父類的方法的形式叫重寫
}
}
class Cat extends Animal {
run() {
console.log(`${this.name}run`);
}
}
const dog = new Dog("旺財(cái)", 5);
const cat = new Cat("咪咪", 3);
console.log("cat", cat);
console.log("dog", dog);
dog.sayHello();
cat.sayHello();
cat.run();
})();
(() => {
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
sayHello() {
console.log(`${this.name}sayHello`);
}
}
class Dog extends Animal {
age: number;
constructor(name: string, age: number) {
super(name);//必須先調(diào)用父類的構(gòu)造函數(shù)
age = this.age;
}
sayHello(): void {
super.sayHello(); //super表示當(dāng)前類的父類
}
}
const dog = new Dog('旺財(cái)',1);
dog.sayHello();
})();
(() => {
abstract class Animal {
//我們不希望直接用Animal來(lái)創(chuàng)建實(shí)例，我們只需要讓它是一個(gè)超類 用來(lái)被繼承
//所以我們給它加上abstract 那么這個(gè)類就只能被繼承 不能用它創(chuàng)建實(shí)例
//抽象類可以添加抽象方法
name: string;
constructor(name: string) {
this.name = name;
}
//抽象方法只能在抽象類里定義 抽象方法沒有方法體
//子類必須對(duì)抽象方法進(jìn)行重寫
abstract sayHello(): void;
}
class Dog extends Animal {
//非抽象類繼承抽象類 必須重寫父類中的抽象方法
sayHello(): void {
console.log("汪汪汪");
}
}
const dog = new Dog("旺財(cái)");
dog.sayHello();
})();
(() => {
/**
* 對(duì)于類型聲明(類型別名) 只能聲明一次
*
* 對(duì)于接口 可以重復(fù)聲明 多次聲明那么創(chuàng)建的實(shí)例應(yīng)把接口中的定義的都實(shí)現(xiàn)
* 接口可以限制類的結(jié)構(gòu)
* 接口只定義類的結(jié)構(gòu)不定義類的實(shí)際值
* 接口的所有方法都是抽象方法
*
*
*
*/
//描述一個(gè)對(duì)象的類型 類型別名
type myType = {
name: string;
age: number;
};
let obj: myType = {
name: "sss",
age: 1,
};
/**
* 接口用來(lái)定義一個(gè)對(duì)象的結(jié)構(gòu)
* 用來(lái)定義一個(gè)類中應(yīng)該包含哪些屬性和方法
*/
interface myInterface {
name: string;
age: number;
}
interface myInterface {
gender: string;
sayHello(): void;
}
let obj1: myInterface = {//當(dāng)作類型使用
name: "aaa",
age: 2,
gender: "male",
sayHello() {
console.log("hello");
},
};
//實(shí)現(xiàn)接口
class Myclass implements myInterface {
name = '孫悟空';
age = 18;
gender = 'male';
sayHello() {
console.log("嘿嘿")
}
}
})();
private getter setter
(() => {
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let per = new Person("孫悟空", 18);
console.log("per", per);
per.name = "豬八戒";
per.age = -18;
console.log("per", per); //可以任意修改 年齡能有負(fù)數(shù)嘛？
/**
* 上面的屬性是在對(duì)象中設(shè)置的，屬性可以任意的被修改
* 屬性可以任意被修改將會(huì)導(dǎo)致對(duì)象中的數(shù)據(jù)會(huì)變得非常不安全
*/
class Animal {
/**q
* 可以在屬性前添加修飾符
*/
public name: string; //公共屬性可以在任意位置(訪問(wèn))更改 默認(rèn)就是public
private age: number; //私有屬性 只能在類內(nèi)部(訪問(wèn))修改
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
//getter 添加方法讓私有屬性可以在外部訪問(wèn)
getAge() {
return this.age;
}
//setter 設(shè)置屬性
setAge(value: number) {
if (value > 0) {
this.age = value;
}
}
}
let dog = new Animal("旺財(cái)", 2);
console.log("dog", dog);
console.log("dog.getAge()", dog.getAge());
dog.setAge(-8);
console.log("dog", dog); //改不了
})();
protected 與 constructor 語(yǔ)法糖
(() => {
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let per = new Person("孫悟空", 18);
console.log("per", per);
per.name = "豬八戒";
per.age = -18;
console.log("per", per); //可以任意修改 年齡能有負(fù)數(shù)嘛？
/**
* 上面的屬性是在對(duì)象中設(shè)置的，屬性可以任意的被修改
* 屬性可以任意被修改將會(huì)導(dǎo)致對(duì)象中的數(shù)據(jù)會(huì)變得非常不安全
*/
class Animal {
/**q
* 可以在屬性前添加修飾符
*/
public _name: string; //公共屬性可以在任意位置 包括子類 (訪問(wèn))更改 默認(rèn)就是public
private _age: number; //私有屬性 只能在類內(nèi)部(訪問(wèn))修改
//protected 受保護(hù)的屬性，只能在當(dāng)前類和當(dāng)前類的子類中訪問(wèn)
constructor(name: string, age: number) {
this._name = name;
this._age = age;
}
// //getter 添加方法讓私有屬性可以在外部訪問(wèn)
// getAge() {
// return this.age;
// }
// //setter 設(shè)置屬性
// setAge(value: number) {
// if (value > 0) {
// this.age = value;
// }
// }
//ts中設(shè)置獲取屬性 設(shè)置屬性 的方法 不會(huì)改變?cè)L問(wèn)數(shù)據(jù)的方法
/**
* 不是特別復(fù)雜的修改時(shí) 一般用不到
*/
get age() {
return this._age;
}
set age(value: number) {
if (value > 0) {
this._age = value;
}
}
}
let dog = new Animal("旺財(cái)", 2);
// console.log("dog", dog);
// console.log("dog.getAge()", dog.getAge());
// dog.setAge(-8);
console.log("dog.age", dog.age);
// console.log("dog", dog); //改不了
dog.age = 8;
console.log("dog", dog);
/**
* 語(yǔ)法糖
*/
class C {
//得用public
constructor(public name: string, public age: number) {}
}
let c = new C("666", 6);
console.log("c", c);
})();
(() => {
function fn(a: any): any {
return a;
}
/**
* 在定義函數(shù)或是類時(shí)遇到類型不明確的 可以使用泛型
*
*/
function fn1(a: T): T {
//我不知道a到底是是么類型但是我知道 返回值和入?yún)⒌念愋蜁r(shí)相同的
return a;
}
fn1(10); //自動(dòng)推斷
fn1("test"); //類型斷言
function fn2(a: T, b: K): T {
console.log("b", b);
return a;
}
fn2(123, "test");
fn2(333, "test");
interface Test {
length: number;
}
//泛型T得是Test的實(shí)現(xiàn)類(子類)
function fn3(a: T): number {
return a.length;
}
fn3([1, 2, 2]); //傳入的參數(shù)的類型得是Test接口的實(shí)現(xiàn)類
})();
倉(cāng)庫(kù)地址：https://gitee.com/bbigger004/tslearn.git
