그림 앱 강의
Array.from()
Array.from() 메서드는 배열이 아닌 유사 배열 객체(iterable)나 반복 가능한 객체(예: NodeList, arguments, 문자열 등)를 배열로 변환할 때 사용됩니다.
예시:
const str = 'hello';
const arr = Array.from(str); // 문자열을 배열로 변환
console.log(arr); // ['h', 'e', 'l', 'l', 'o']Array.from()의 동작 방식:
- 유사 배열 객체란
length속성을 가지며, 인덱스가 있는 객체를 말합니다. 예를 들어,arguments, DOM의NodeList, HTML 콜렉션 등이 이에 해당합니다. - 반복 가능한 객체(iterable)는
for...of문으로 순회할 수 있는 모든 객체를 말하며, 문자열,Set,Map등이 해당합니다.
예시: NodeList를 배열로 변환
const nodeList = document.querySelectorAll('div'); // NodeList
const arr = Array.from(nodeList); // 배열로 변환
console.log(arr); // 배열로 출력됨Array.from()을 사용할 수 없는 경우:
Array.from()은 유사 배열 또는 반복 가능한 객체에서만 동작하므로, 완전히 배열과 관계 없는 객체나 숫자, 일반 객체 같은 경우에는 변환되지 않습니다.
보충 설명:
Array.from()은 두 번째 매개변수로 매핑 함수를 받을 수 있어, 배열로 변환하는 과정에서 추가적인 처리를 할 수 있습니다.
예시: 매핑 함수와 함께 사용
const set = new Set([1, 2, 3]);
const arr = Array.from(set, x => x * 2); // 배열로 변환하면서 각 요소를 2배로
console.log(arr); // [2, 4, 6]결론적으로, Array.from()은 유사 배열 객체나 반복 가능한 객체를 배열로 변환하는 방법이며, 배열로 변환하려는 데이터가 iterable하거나 유사 배열일 때 유용하게 사용할 수 있습니다.
타입스크립트로 블록체인 만들기
자바스크립트 : 코드를 실행하기 전에는 에러인지 모른다
타입스크립트 : 미리 알 수 있다.
2.1 Implicit Types vs Explicit Types
기본식
const playerNico : {
name: string,
age?: number
} = {
name: "nico"
}
const playerLynn : {
name: string,
age?: number
} = {
name: "lynn",
age: 12
}Alias(별칭) : Player 타입을 생성해서 중복을 없애자
type Player = {
name: string,
age?: numer
}
const nico : Player = {
name: "nico",
}
const lynn : Player = {
name: "lynn",
age: 12
}
2.2 Types of TS part One
Age Alias(별칭)도 만들기 1
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const nico : Player = {
name: "nico",
}
const lynn : Player = {
name: "lynn",
age: 12
}Age Alias(별칭)도 만들기 2
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const playerMaker(name:string){
return {
// name:name
name
}
}
const nico = playerMaker("nico"); // 제대로 출력 O
nico.age = 12 // 제대로 출력 X > playerMaker에 age없어서but
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const playerMaker(name:string) : Player {
return {
// name:name
name
}
}
const nico = playerMaker("nico"); // 제대로 출력 O
nico.age = 12 // 제대로 출력 O > playerMaker에 type이 Player이고, Player에 age값 있음2.3 Types of TS part Two
화살표 함수
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const playerMaker = (name:string) => ({name})
const nico = playerMaker("nico");
nico.age = 12; // 제대로 출력 X > playerMaker에 age없어서그래서!! 수정본
화살표 함수
type Age = number;
type Name = string;
type Player = {
name: Name,
age?: Age
}
const playerMaker = (name:string) : Player => ({name})
const nico = playerMaker("nico");
nico.age = 12; // 제대로 출력 Oreadonly - 1
type Age = number;
type Name = string;
type Player = {
readonly name: Name, // name 수정 못함
age?: Age
}
const playerMaker = (name:string) : Player => ({name})
const nico = playerMaker("nico");
nico.age = 12;
nico.name = "las"; // Cannot assign to 'name' because it is a read-only propertyreadonly - 2
const numbers: readonly number[] = [1,2,3,4]
numbers.push(1) // Property 'push' does not exist on type 'readonly number[]'readonly - 3
const names: readonly string[] = ["1", "2"];
names.push("3") // Property 'push' does not exist on type 'readonly string[]'
tuple
tuple : 특정위치에 특정타입이 있어야함
const player: [string, number, boolean] = ["nico", 12, false]
player[0] = 1 // Type 'number' is not assignable to type 'string'const player: readonly [string, number, boolean] = ["nico", 12, false]
player[0] = "hi" // Cannot assign to '0' because it is a read-only property.2.4 Types of TS part Three
undefined, undefined, 선택적 타입
let a : undefined = undefined
let b : null = null선택적 타입
type Player = {
age?: number // age?: number | undefined
}any : 타입스크립트(보호장치)로부터 빠져나오고 싶을 때 사용
let a = [] // let a: any[]
const a : any[] = [1,2,3,4]
const b : any = true
a+b // O
const a : any[] = [1,2,3,4]
const b = true
a+b // Operator '+' cannot be applied to types 'any[]' and 'boolean'unknown : 어떤 타입인지 모르는 변수는?
let a: unknown;
let b = a + 1 // 'a' is of type 'unknown'해결
let a : unknown;
if(typeof a === "number"){
let b = a + 1; // let a: number
}
if(typeof a === "string"){
let b = a.();
}void : 아무것도 return 하지 않는 함수를 대상으로 사용
function hello(){ // function hello(): void
console.log("x");
}
const a = hello();
a.toUpperCase(); // Property 'toUpperCase' does not exist on type 'void'never : 함수가 절대 return 하지 않을 때
function hello() : never {
// return "x" // Type 'string' is not assignable to type 'never'
throw new Error("xxx"); // 제대로 동작 O > return 하지 않고 오류를 발생시키는 함수
}function hi(name: string|number){
if(typeof name === "string"){
name; // name: string
} else if (typeof name === "number"){
name; // name: number
} else {
name; // name: never > 절대 return 되지 않음
}
}3.0 Call Signatures
function add(a: number, b: number): number
function add (a:number, b:number){
return a + b;
}const add: (a: number, b: number) => number
const add = (a:number, b:number) => a + bcall signature : 함수 위에 마우스를 올렸을 때 보게 되는 것
type Add = (a:number, b:number) => number;
const add: Add = (a, b) => a + b; // => number
const addd: Add = (c, d) => c + d; // => number
const lala: Add = (x, y) => x + y; // => number
YOLO