TS 基本内容

Mobile 2023-04-10 01:40:25 views: null
  1. JavaScript スクリプト言語
  2. javascript の高度なスクリプト構文の ts と省略されます

TypeScript は、Microsoftが開発したオープン ソースのプログラミング言語で、JavaScriptの上に静的な型定義を追加することによって構築されています。TypeScript は、TypeScriptコンパイラまたは Babel を介して JavaScript コードに変換され、任意のブラウザおよびオペレーティング システムで実行できます。

 
 
     
  
  1. TypeScript中文网 · TypeScript——JavaScript的超集
    2.  
 
 
 
公式ウェブサイト
 
 
 
 
     
  
  1. https://www.tslang.cn/index.html
    2.  
 
 
 
tsとjsの違い
 
 
TypeScript is a superset of JavaScript that extends the syntax of JavaScript, so existing JavaScript code can work with TypeScript without any modified. TypeScript は、型注釈によるコンパイル時の静的型チェックを提供します。
 
 
 
 
言語機能
 
 
TypeScript は JavaScript に機能を追加する言語拡張です。追加された機能は次のとおりです。
 
 
 
 
类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await
以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数
 
 
タイプ
 
 
 
 
类型分析：强类型 和 弱类型
变量在声明之后 是否可以任意转化数据类型
js 弱类型脚本语言 动态弱类型检测
ts 弱类型脚本语言 静态弱类型检测
 
 
書類
 
 
 
 
     
  
  1. https://typescript.bootcss.com/
    2.  
 
 
 
プロジェクト外で ts を使用する
 
 
 
 
     
  
  1. npm install -g typescript
    2.  
 
 
 
ts コンパイラを使用してコンパイルする
 
 
 
 
     
  
  1. tsc 文件名称
    2.  
 
 
 
ファイルは ts サフィックスで作成されます
 
 
 
 
     
  
  1. index.ts
    2.  
 
 
 
ts ファイルはブラウザーで直接使用することはできません。ブラウザーでコンパイルしてアクセスする必要があります。
 
 
 
 
 
 
ts/ts 区别

ts代码
let sname:string = "";
sname = 'a';


js
let sname = "";
sname = 1;

//编译之后的
var sname = "";
sname = "a";
 
 
ts の構文
 
 
 
 
类型
//ts 声明变量 关键词 名称：类型=初试值？
//字符串类型
let sname: string = "a";
let ssname: string;

//bool
let isM: boolean = true;

//number
let age: number = 0;

//数组
let arr: string[] = [];
let arr1: number[] = [];
let arr2: boolean[] = [];
let arr3: object[] = [];

//泛型
let arr4: Array<number> = [];

//元组
let a: [string, number] = ["a", 1];
console.log(a);

//枚举
enum week {
"mon",
"tus" = 10,
"wed",
}

console.log(week);
console.log(week[0]);

//任意值
let b: any[] = [1, "a", true];
let c: any = "a";

//void 空值 无返回值类型 函数使用
function Person(): void {}
function Person1(): boolean {
return true;
}

//undefined null
let u: undefined = undefined;
let n: null = null;
 
 
型アサーション
 
 
 
 
在代码中如果存在一个变量可能有值或者为null
data.id-----data 可能有值或者为null
使用类型断言处理
 
 
これは、型アサーションを通じてコン​​パイラに「私を信じてください。私が何をしているのか知っています」と伝える方法です。型アサーションは、他の言語の型変換に似ています
 
 
アサーションを次のように入力します
 
 
 
 
//类型断言
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
let strLength: number = (<string>someValue).length;
 
 
特に vite を使用して、react ts プロジェクトをビルドします。
 
 
 
 
 
 
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
 
 
関数
 
 
関数型アノテーション
 
 
 
 
ts在函数的形参上添加了类型，并且函数需要带返回值类型

function Person(name:string):void{

}
 
 
ts 関数の完全な記述
 
 
関数式を関数に追加する
 
 
 
 
(str: string) => number 为函数类型
这种写法更像变量赋值
let Lens: (str: string) => number = function (str: string): number {
return str.length;
};
 
 
関数のオプション引数とデフォルト値
 
 
 
 
//？为可选
function add(a: number, b?: number): number {
if (b) {
return a + b;
}
return a;
}

add(1);
// function add(a: number, b: number = 0): number {
// return a + b;
// }

// add(1);


function Save(a: string, ...b: string[]) {
console.log(b);
}
Save("a", "b", "c");
 
 
過負荷
 
 
JavaScript 自体は動的言語です。関数が渡されたパラメータに応じて異なるタイプのデータを返すことは、JavaScript では非常に一般的です。
 
 
より過負荷になっているのは何ですか？
 
 
同じ名前で、パラメーターの数が異なり、戻り値の型が異なる関数は、関数のオーバーロードと呼ばれます。
 
 
 
 
 
 
//重载
//重载个数算函数表达式
//函数的主题必须兼容上面的表达式
function Sort(): string[];
function Sort(a: string): string[];
function Sort(a: string, b: string): string[];
function Sort(a: number, b: number): number[];
//函数主体
function Sort(a?: any, b?: any): any[] {
if (typeof a == "number" && typeof b == "number") {
return [b, a];
}
if (typeof a == "string" && typeof b == "string") {
return [b, a];
}
return [];
}

Sort(1, 2);

//编译之后
//函数主体
function Sort(a, b) {
if (typeof a == "number" && typeof b == "number") {
return [b, a];
}
if (typeof a == "string" && typeof b == "string") {
return [b, a];
}
return [];
}
Sort(1, 2);
 
 
ts のカスタム タイプ
 
 
type キーワードを使用する
 
 
 
 
//自定义类型
type PropType = {
name: string;
age?: number;
};

//以上定义的格式 直接定义属性为必填 写？属性为选填

let stu: PropType = { name: "" };
 
 
例としてプロジェクトを取り上げます。
 
 
 
 
const App = () => {
return (
<>
<div>app</div>
</>
);
};

export default App;
//普通的函数组件

转化为ts格式组件
import React from "react";
//使用type定义props
type PropTypes = {
list?: object[];
};

const Menu: React.FC<PropTypes> = (props) => {
return (
<>
<div>Menu</div>
</>
);
};
//props默认值
Menu.defaultProps = {
list: [],
};

export default Menu;
 
 
インターフェース
 
 
インターフェース
 
 
TypeScript の中核となる原則の 1 つは、値の構造を型チェックすることです。「ダックタイピング」または「構造的サブタイピング」と呼ばれることもあります。TypeScript では、インターフェイスの役割は、これらの型に名前を付け、コードまたはサードパーティ コードのコントラクトを定義することです。
 
 
ts の型とインターフェイスの両方を構造化できます。
 
 
 
 
interface 关键词
//接口的作用 定义结构 没有实现体
interface propsTypes {
name: string;
age: number;
fun: () => void;
}

//对象实现接口
let stus: propsTypes = {
name: "小花",
age: 18,
fun:function ():void{

}
};

//接口属性选填
let app:()=>number=function():number{

}
直接在属性上写？
interface propsTypes {
name: string;
age: number;
fun?: () => void;//选填
}

//对象实现接口
let stus: propsTypes = {
name: "小花",
age: 18,
};
 
 
インターフェイス読み取り専用
 
 
 
 
关键词 readonly
interface propsTypes {
name: string;
age: number;
fun?: () => void;
readonly goback: boolean;
}

//对象实现接口
let stus: propsTypes = {
name: "小花",
age: 18,
goback: true,
};

//接口定义的属性 不能赋值
// stus.goback = false;
 
 
インターフェイスで任意のプロパティを設定します
 
 
 
 
接口背实现之后如果没有设置任意，不能随意添加属性。
//接口的作用 定义结构 没有实现体
interface propsTypes {
name: string;
age: number;
fun?: () => void;
readonly goback: boolean;
//任意
[propName: string]: any; //值 any
}

//对象实现接口
let stus: propsTypes = {
name: "小花",
age: 18,
goback: true,
isma: false,
isFUN: 10,
};

//接口定义的属性 不能赋值
// stus.goback = false;
 
 
インターフェースの索引付け
 
 
 
 
interface aType {
//index 为固定
[index: number]: string;
}
let arrss: aType = ["a"];
 
 
インターフェイス インターフェイスを使用するように関数コンポーネントの props を変更します。
 
 
 
 
import React from "react";
//使用type定义props
// type PropTypes = {
// list?: object[];
// };

type listType = {
id: number;
name: string;
};

interface PropTypes {
list?: object[];
}

const Menu: React.FC<PropTypes> = (props) => {
return (
<>
<div>Menu</div>
</>
);
};
//props默认值
Menu.defaultProps = {
list: [],
};

export default Menu;
 
 
ts操作機能部品
 
 
 
 
1.文件后缀为tsx
2.写函数组件
3.修改为ts
import React, { MouseEvent, ReactElement, useState } from "react";
//接口
//限定结构
type menuType = {
name?: string;
};
interface propTypes {
menu: menuType[];
children?: ReactElement;
}
const Menu: React.FC<propTypes> = ({ menu, children }) => {
let [isShow, setShow] = useState<boolean>(true);

let add = (e: MouseEvent) => {
console.log(1111);
};
if (isShow) {
return (
<>
<div>
<button onClick={add}>按钮</button>
{menu.map((item, index) => {
return <p key={index}>{item.name}</p>;
})}
</div>
</>
);
}
return null;
};

export default Menu;
 
 
ジェネリック
 
 
ソフトウェア エンジニアリングでは、明確に定義された一貫性のある API を作成するだけでなく、再利用性も考慮します。コンポーネントは、現在のデータ型をサポートするだけでなく、将来のデータ型もサポートできるため、大規模なシステムを作成する際に非常に柔軟な機能が提供されます。
 
 
説明: 型を定義するときにその型を知る必要はなく、使用するときにその型を伝える必要はありません。
 
 
 
 
举例：
function identity(arg: number): number {
return arg;
}

function identity(arg: any): any {
return arg;
}

//以上两种函数 同名 参数类别不一致 返回值不一致。
//会定义多个导致函数的可复用性变差。

使用泛型提高函数可复用性

使用泛型变量来定义泛型结构

function psy<T>(a: T): T {
return a;
}

psy<number>(1);
psy<string>("a");
psy<boolean>(true);


//使用泛型变量
function psy<T>(a: T[]): T[] {
a.length
return a;
}

psy<number>([1, 2, 3]);



function sort<T, U>(a: T, b: U): any[] {
let arr: any[] = [];
arr[0] = a;
arr[1] = b;
return arr;
}

sort<number, number>(1, 2);
sort<string, string>("a", "b");
sort<boolean, boolean>(true, false);
 
 
 


                    

                        
Supongo que te gusta

                        

                            
                            
                        

                    

                    
Origin blog.csdn.net/m0_74331185/article/details/130014200

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    

                

            

            


                

                    

                        
                        
                        
                        
                    

                    

                        

                            

                                Recomendado
                            

                            

                        

                    

                    

                        

                        
                        
                    

                


                

                    

                        

                            

                                Clasificación
                            

                            

                        

                    

                    

                        
                    

                

                

                    

                        

                            

                                Diario
                            

                            

                                Más
                            

                            

                        

                    

                    

                        

                            2024-06-02(0)
                        

                        

                            2024-06-01(2)
                        

                        

                            2024-05-31(0)
                        

                        

                            2024-05-30(0)
                        

                        

                            2024-05-29(1)
                        

                        

                            2024-05-28(0)
                        

                        

                            2024-05-27(1)
                        

                        

                            2024-05-26(1)
                        

                        

                            2024-05-25(0)
                        

                        

                            2024-05-24(13)
                        

                    

                


            


            
        

    





    

        

            
Code World

            
© 2018 codetd.com