TypeScript の記事.01 - 概要、クラス、インターフェイス、基本型の簡単な紹介

1 はじめに

(1) インストールとコンパイル

インストール: npm install -g typescript

拡張子が .ts のファイルを作成します

コンパイル: tsc filename.ts は、コンパイル後に .js と同じ名前のファイルを生成します。

表示: HTML ファイル内のスクリプトに js ファイルを導入し、実行してコンソールを表示します。

(2) 型アノテーション

TypeScript の型アノテーションは、関数または変数に制約を追加する軽量の方法です。変数または関数が宣言されると、型制約を追加できます。他の型が渡されると、ts は警告しますが、js ファイルは引き続き作成されます

2.クラス

TypeScript は、クラスベースのオブジェクト指向プログラミングのサポートなど、JavaScript の新機能をサポートします。

//  类
class Student {
    fullName:string;
        //  在构造函数的参数上使用public等同于创建了同名的成员变量
    // firstName:string;
    // lastName:string;
    constructor(public firstName:string,public lastName:string){
        this.fullName=this.firstName+"-"+this.lastName;
    }
}
const stu = new Student('haha','11')
const show2 = (mes:Stu)=>{
  console.log('11111111111',mes);  // Student {firstName: 'haha', lastName: '11', fullName: 'haha-11'}
}
show2(stu); // 传递的是对象

3. インターフェース

TypeScript の中心原則の 1 つは、値の構造を型チェックすることです。「ダック タイピング」または「構造サブタイピング」と呼ばれることもあります。TypeScript では、インターフェイスの役割は、これらの型に名前を付け、コードまたはサードパーティ コードのコントラクトを定義することです。

// interface 接口
interface Stu{
    sname: string,
    age: number
}
const students = ( student: Stu ) => {
    console.log('++',student);
}
students({ uname: 'mm', age:  11 } )

4. 基本タイプ

(1) ブール型

// 基础数据类型    ts中会自动判断数据类型,不可重新赋值    在js中, 赋值后可重新赋值(弱类型)
// 1. Boolean 布尔类型   
// let flag = true  不写类型会自动推断类型
// flag = 'abc'  //会报错
let flag: boolean = true    //  相当于 let flag = true 
console.log(flag);   // true

(2)数字デジタル式

// 2. Number 数字
let num1: number = 10
console.log(num1);  // 10

(3) String 文字列型

// 3.String 字符串类型(模板字符串) 
let str = 'hello mm~~~'
let str2 = 'heihei'
console.log('str===>',str,'\tstr2===>',str2);  // str===> hello mm~~~     str2===> heihei

(4) Array 配列型

// 4. Array 数组类型
// 定义方式 1: 元素类型后接[],表由此类型元素组成的一个数组
let arr: string[] = ['a','b']
let num: number[] = [1,2,3]
// 定义方式2: Array后接<元素类型>
let arr1: Array<string> = ['haha','heihei']
console.log('arr===>',arr,'\tnum===>',num,'\tarr1===>',arr1);   //arr===> (2) ['a', 'b']     num===> (3) [1, 2, 3]     arr1===> (2) ['haha', 'heihei']

(5) タプルタプル

// 5. Tuple 元组   元组类型允许表示一个已知数量和类型的数组, 各元素类型可以不同
let basket: [string,number,string[]] = ['aaa', 12, ['qe','as']]
console.log(basket);  //['aaa', 12, Array(2)]
console.log(basket[2]);  //  ['qe', 'as']
// 访问越界元素, 会使用联合类型替代  
basket[4] = '111'
console.log(basket);

(6) ジョイントの種類

// 6. 联合类型  使用 | 分割
let fruit: string | number = 'haha'
fruit = 5
console.log(fruit);  // 5

(7) 列挙

// 7. Enum 枚举类型
enum Gender {男, 女, 未知}
let sex: Gender = Gender.女
console.log(sex); // 1
sex=2
console.log(sex);  // 2
let sexName: string = Gender[2]
console.log(sexName);  // 未知

(8) 任意のタイプ

// 8. Any 任意类型  不希望类型检查器检查, 直接通过
let word: any = 'hhhh'
word = 12
// 调用方法 编译时不报错, 但运行时会报错   没有该方法  
// word.toUpperCase()   //Uncaught TypeError: word.toUpperCase is not a function 
// let word1: object = 1  //对象的原型上也没有该方法, 故找不到
// word1.toUpperCase()   // Uncaught TypeError: word1.toUpperCase is not a function
console.log(word);

(9) Void には型がありません

// 9. Void 没有任何类型, 一般情况下用于函数的返回类型, 当函数没有返回值时,类型就为void
let fun1 = (msg: string, age: number) => {
  // 参数类型
}
let fun2 = (msg: string, age: number) : void =>{
    // 函数也有类型, 没有返回值时,类型就为void
}
let fun3 = (msg: string, age: number) : string =>{
    // 函数也有类型, 有返回值, 则为返回值的类型
    return 'aaaa'
}

(10) NULL および未定義

// 10. Null 和 Undefined   默认情况, null和undefined是所有类型的子类型, 可以将null和undefined赋值给任意类型    常在联合类型中使用
let numUnd: number = undefined
let numNull: null = null
console.log(numUnd); // undefined
console.log(numNull);  // null
console.log(numUnd == numNull);  // true
console.log(numUnd === numNull);  // false 
// 联合类型中使用      
function fun5(mes:string | undefined){
    console.log(mes);
}
fun5('mmmm')  // mmm
fun5(undefined)  // undefined

(11) Never は決して存在しない値のタイプです

// never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
// 11. Never  永不存在的值的类型    任何类型的子类型   只有never才能赋值给never类型
// 返回never的函数必须存在无法达到的终点   相当于死循环, 不终止
function error(message: string): never {
    throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

(12) オブジェクトの非プリミティブデータ型

// 12. Object 非原始数据类型, 定义Object类型的变量, 就可以使用Object中提供的方法  除number，string，boolean，symbol，null或undefined之外的类型。使用object类型，就可以更好的表示像Object.create这样的API
let obj:object = {name: 'Mouk', age: 22, msg: 'sleeping in class!!!!!'}
let obj1 = {
    msg1: 'I have a story to tell you...',
    msg2: "Someone said: 'I don't want to sleep!'",
    msg3:'Two seconds later......',
    msg4:'Mouk has fallen asleep!!! hhhhhhhhh'
}
console.log('====>',Object.keys(obj1));  //['msg1', 'msg2', 'msg3', 'msg4']

(13) 型アサーション

// 类型断言    类似强制类型转换
// 有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型
let username:any = 'admin';
const len:number = (username as string).length;
console.log(len);  // 5

参考ドキュメント: https://www.tslang.cn/docs/handbook/basic-types.html