ts 기초 튜 토리 얼 (1)
68334 단어 ts
설치 와 환경 구축
1. 전역 에 typescript 설치
npm install -g typescript
2. 프로젝트 초기 화
일반적으로 ts 는 js 로 컴 파일 한 후에 js 를 실행 합 니 다. 한 걸음 에 도착 하려 면 ts - node 를 설치 할 수 있 습 니 다.
"scripts": {
"build": "tsc -w", // ts js, -w
"start": "ts-node ./src/index.ts" // ts
}
4. tsconfig. json 상용 설정
{
"compilerOptions": {
"target": "es5", // ECMAScript : 'ES5'
"module": "commonjs", // : commonjs/amd/system/umd/es2015
"moduleResolution": "node", //
"experimentalDecorators": true, // ES
"allowSyntheticDefaultImports": true, // 。
"sourceMap": true, // map
"strict": true, //
"noImplicitAny": true, // any
"alwaysStrict": true, // ， 'use strict'
"declaration": true, // .d.ts
"removeComments": true, //
"noImplicitReturns": true, //
"importHelpers": true, // tslib
"lib": ["es6", "dom"], // , es6 es6lib
"typeRoots": ["node_modules/@types"],
"outDir": "./dist", //
"rootDir": "./src", //
"noEmitOnError":true // ，
},
"include": [ // **/
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"dist",
"**/*.test.ts",
]
}
5. hello world
//ts , : , : 。
// :
function sayHello(person: string):string {
return 'Hello, ' + person;
}
const user = " "
console.log(sayHello(user));
"use strict";
function sayHello(person) {
return 'Hello, ' + person;
}
var user = " ";
console.log(sayHello(user));
//# sourceMappingURL=index.js.map
6. noImplicitAny 속성 설정 테스트
tsconfig. json 에서 noImplicitAny 를 true 로 설정 합 니 다. 이것 은 표현 식 과 성명 에 포 함 된 any 형식 타 임 스 가 잘못 되 었 음 을 의미 합 니 다.이것 은 사실 엄밀 한 인 코딩 습관 으로 anyScript 는 정적 유형 검사 의 가 치 를 약화 시 킬 수 있다.
function sayHello(person) {
return 'Hello, ' + person;
}
const user = " "
console.log(sayHello(user));
기본적으로 컴 파일 이 통과 되 지 않 아 도 컴 파일 후 파일 이 생 성 됩 니 다.noEmitOnError 속성 을 true 로 설정 합 니 다. 상기 작업 6 은 any 형식 으로 인 한 컴 파일 이 통과 되 지 않 으 면 컴 파일 된 파일 이 생 성 되 지 않 습 니 다.
기본 유형
js 기본 유형 은 두 가지 로 나 뉘 는데 그것 이 바로 원시 데이터 형식 과 대상 유형 이다. 그 중에서 원시 데이터 유형 은 불 값, 수치, 문자열, null, undefined 와 es6 시리즈 의 symbol, bigint 를 포함한다.
1. 불 / 수치 / 문자열
const bol: boolean = true;
const num: number = 1024;
const userName: string = " ";
//
const str:string=`${userName}`
2. null 과 undefined
//
const onlyNull: null = null;
const onlyUndefined: undefined = undefined;
3. function
성명 의 함수 가 호출 될 때 매개 변수 개 수 는 성명 시의 매개 변수 갯 수 와 일치 해 야 합 니 다.
// void
const fn1 = (param1:string,param2:number): void => {
console.log(" ");
};
function f2(param1:string,param2:number):void{
console.log(" ");
}
//
const fn3 = (): string => {
return " =>"
};
//
function f4():string{
return " fn"
}
//
// fn1 = ,
// , => , ， ，
const fn1:(param1:string,param2:number)=>void = (param1:string,param2:number): void => {
console.log(" ");
};
//
//
function f5(name:string,age?:number):string{
return " fn"
}
//
function f6(name:string,age:number=18):string{
return `${name}--${age}`
}
// ,
function f7(name:string,desc?:string,age:number=18):string{
return `${name}--${age}--${desc}`
}
//
function f8(...args:number[]):number[]{
return args
}
console.log(f8(1,2,3,4,5))//[1,2,3,4,5]
4. void 선언 변수
void 도 변 수 를 설명 할 수 있 지만 undefined 에 만 작용 할 수 있 고 null 도 안 됩 니 다.tsconfig. json 에서 strictNullChecks 속성 이 false 로 설정 되 었 을 때 만 null 이 void 에 값 을 부여 할 수 있 습 니 다.
const u:void=undefined;// ,
const n:void=null;//
const age:void=18;//
5. symbol
symbol 사용 의존 es6 컴 파일 보조 라 이브 러 리, tsconfig. json lib ["es6"]
const sym1:symbol = Symbol();
const sym2:symbol = Symbol();
console.log(sym1===sym2)//false
6. bigint
bigint 는 큰 정 수 를 안전하게 저장 하고 조작 할 수 있 으 며, 현재 호환성 이 좋 지 않다.
// ，
const max = Number.MAX_SAFE_INTEGER;
const max1 = max + 1
const max2 = max + 2
console.log(max1===max2)// true ,
// BigInt ， , js
const big_max = BigInt(Number.MAX_SAFE_INTEGER);
// n bigint , bigint number
//ts bigint, 1n,2n, BigInt(1),BigInt(2)
const big_max1 = big_max + 1n
const big_max2 = big_max + 2n
console.log(big_max1 === big_max2) // false
임 의 값
임의의 값 (any / unknown) 은 임의의 형식 으로 할당 할 수 있 음 을 표시 합 니 다.
// any
let str1:string=" ";
str1=123//
//any , js
// ， any ，tsconfig.json noImplicitAny
let str2:any=" "
str2=123//
2. unknown
//any ， , ， unknown
let str3:any=" "
str3.say();//
str3.age //
//unknown any
let str4:unknown=" "
str4.say();//
str4.age //
배열
자바 를 배 웠 다 면 ts 에서 배열 의 두 가지 정의 방식 을 쉽게 이해 하고 좋아 하 는 것 을 고 르 면 됩 니 다.
// java + ,List arr=new ArrayList();
const arr1: Array<string> = [" "," "," "]
// +[],java :String [] arr = {" "," "," "};
const arr2: string[] = [" "," "," "]
//
const arr3: string[] = [" "," "," ",1024]// 1024
원조
ts 의 원조 와 js 의 수 조 는 매우 비슷 해서 서로 다른 유형의 값 을 저장 할 수 있다
1. 기본 사용
원 그룹 사용 과정 에서 원 그룹 형식 이 정의 하 는 순서 와 충전 형식의 순서 가 일치 하고 수량 이 일치 하 며 색인 에 따라 접근 할 수 있 습 니 다.
const tuple1: [string, number]=[" ",24]// ok
// , js [" ", 24]
console.log(tuple1[0])//
//
const tuple2: [string, number]=[24," "]//
const tuple3: [string, number]=[" "]//
const tuple4: [string, number]=[" ",24,25]//
2. 원 그룹 크로스
ts. 원본 그룹 에 배열 의 push 방법 으로 새 요 소 를 삽입 할 수 있 습 니 다. (접근 은 허용 되 지 않 습 니 다)
const tuple5: [number, number] = [1, 2];
tuple5.push(3); //
console.log(tuple5); // [1,2,3]
console.log(tuple5[2]); //
매 거
매 거 유형 은 매 거 진 값 으로 이름 을 얻 을 수 있 습 니 다. 이 느낌 은 대상 의 키 값 과 같 습 니 다.
//
enum Flag{
open=true,
close=false
}
1. 숫자 매 거 - 기본 성장
우리 가 구성원 의 가 치 를 개의 치 않 을 때, 이러한 성장 행 위 는 매우 유용 하지만, 매 거 진 구성원 의 가 치 는 모두 다르다 는 것 을 주의해 야 한다.
enum Language{
java,
node,
php,
python
}
//
console.log(Language[0])//java
//
console.log(Language["java"])//0
//
console.log(Language);
{
'0': 'java',
'1': 'node',
'2': 'php',
'3': 'python',
java: 0,
node: 1,
php: 2,
python: 3
}
// IIFE
"use strict";
var Language;
(function (Language) {
Language[Language["java"] = 0] = "java";
Language[Language["node"] = 1] = "node";
Language[Language["php"] = 2] = "php";
Language[Language["python"] = 3] = "python";
})(Language || (Language = {}));
console.log(Language);
//# sourceMappingURL=index.js.map
//
{
java: 0,
node: 1,
php: 2,
python: 3
}
//
{
'0': 'java',
'1': 'node',
'2': 'php',
'3': 'python',
}
2. 숫자 매 거 - 사용자 정의 증가
우리 가 원 하 는 구성원 의 값 을 우리 가 예상 한 대로 설정 해 야 할 때, 매 거 진 성장 치 를 수 동 으로 설정 해 야 한다.물론 설정 되 지 않 은 값 은 문맥 에 따라 증가 합 니 다.
enum Language{
java=5,
node,
php,
python
}
//
console.log(Language)
{
'5': 'java',
'6': 'node',
'7': 'php',
'8': 'python',
java: 5,
node: 6,
php: 7,
python: 8
}
// ，
enum Language{
java=100,
node=101,
php=103,
python=104
}
3. 문자열 매 거
사실은 상기 숫자 매 거 진 값 을 문자열 로 바 꾸 는 것 이지 만 구조 가 약간 다 르 기 때문에 매 거 진 것 이 대상 유형 에 속 한 다 는 것 을 다시 한 번 증명 한다.
enum Language{
java="J",
node="N",
php="P",
python="PY"
}
//
console.log(Language)
{
java: 'J',
node: 'N',
php: 'P',
python: 'PY'
}
// js
"use strict";
var Language;
(function (Language) {
Language["java"] = "J";
Language["node"] = "N";
Language["php"] = "P";
Language["python"] = "PY";
})(Language || (Language = {}));
console.log(Language);
//# sourceMappingURL=index.js.map
4. 이 구 매 거
이것 은 새로운 형식 이 아니 라 파생 형식 에 속 하 며 숫자 와 문자열 조합 을 포함 하 는 매 거 진 입 니 다.
enum SwitchEnum {
open = 1,
close= "0",
}
//
"use strict";
var SwitchEnum;
(function (SwitchEnum) {
SwitchEnum[SwitchEnum["open"] = 1] = "open";
SwitchEnum["close"] = "0";
})(SwitchEnum || (SwitchEnum = {}));
//# sourceMappingURL=index.js.map
대상
ts 는 대상 의 사용 에 있어 제한 이 있 고 특정한 유형의 인 스 턴 스 여야 하 며 인터페이스 와 자주 결합 하여 사용 해 야 합 니 다.
//
const obj:object={};
//
// ， ， ， name
obj.name="tom"
// interface
// java,
// , ,
interface User{
name:string
}
const u1:User={
name:" "
}
// ，
const u2:User={
name:" ",
age:24
}
// ，
const u3:User={}
// ,
interface Person{
name:string,
say: (something: string) => string
}
const p:Person={
name:"jack",
say: (something: string) => something
}
console.log(p.say("hello"))//hello
2. 선택 가능 한 속성
어떤 때 우 리 는 어떤 속성 이 선택 할 수 있 기 를 바 랍 니 다. 사용 하 시 겠 습 니까?수식 하 다
interface Stu{
name:string,
desc?:string
}
// desc ,
const s:Stu={
name:"tom"
}
3. 임의의 속성
어떤 때 는 우리 가 임의의 속성 을 추가 하 는 것 을 허락 하지만, 그 사용 과 표현 은 좀 이해 하기 어렵다.
interface Stu {
name: string;
sno?: number;
[prop: string]: any;
}
// ok
const s1: Stu = {
name: 'Tom',
sex: ' '
};
// ok,
const s2: Stu = {
name: 'Jack',
sex: ' ',
sno:10010
};
3.1 난해 점 1
const s: Stu = {
name: 'Join',
sex: ' ',
sno:10010,
className:"A ",
desc:" "
};
3.2 난해 점 2
prop: string: any; 임의의 속성 이 string 형식 일 수 밖 에 없다 고 생각 하 시 겠 지만 사실은 any 입 니 다.
// ，
const s: Stu = {
name: 'Join',
sex: ' ',
sno:10010,
className:"A ",
desc:" ",
hobit:[" "," "," "],
soulmate:{},
flag:true
};
3.3 난해 점 3
prop: string: any; 아마도 [prop: string] 은 고정 적 인 쓰기 라 고 생각 할 것 입 니 다. 사실은 prop 는 사용자 정의 변수 일 뿐 입 니 다. p, 심지어 a, b, c, d 로 간략하게 쓸 수 있 지만 prop: string, [prop: number] 라 는 두 가지 쓰기 만 있 습 니 다.
interface Stu {
name: string;
[prop: number]: any;
}
//
const s1: Stu = {
name: 'Jack',
sex: ' ',
};
const s2: Stu = {
name: 'Jack',
age: 18,
};
const s3: Stu = {
name: 'Jack',
hobit:[" "," "," "],
};
const s4: Stu = {
name: 'Jack',
soulmate:{},
};
const s5: Stu = {
name: 'Jack',
flag:true
};
// ，
//[prop:number]:any, , , ok
const s6: Stu ={
name:"jack",
0:true,
1:[],
2:{},
3:" ",
4:Symbol()
}
4. 대상 유형의 하위 유형
//
enum Like {
coding
}
const arr:number[]=[1,2,3];
const tuple:[string,number]=[" ",1024]
const fn=():void=>{}
// ,ts
// ，
obj=Like;
obj=arr;
obj=tuple;
obj=fn;
5. 속성 만 읽 기
때때로 우 리 는 대상 의 일부 속성 이 할당 후 변경 되 지 않 기 를 바 랍 니 다. readonly 수식 을 사용 하면 됩 니 다.
interface Stu {
readonly sno:number
}
//
const s:Stu={
sno:10010
}
s.sno=10011 // Cannot assign to 'sno' because it is a read-only property.
참조 링크
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Nest] Nest WikiDocs (4.14)라우트핸들러란 Nest.js와같은 프레임워크에서 요청을 처리하는 엔드포인트마다 동작을 수행하는 컴포넌트 (@Get등등..) 세션관리 : 세션 쿠키를 찾은후, 해당 쿠키에대한 세션상태를 조회후 요청에 세션정보를 추가해...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
